﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title>新方向</title>
    <link rel="stylesheet" href="css/ydui.css">
    <link rel="stylesheet" href="plugins/DateSelector/DateSelector.css">
    <link rel="stylesheet" href="plugins/MultiPicker/MultiPicker.css">
    <link rel="stylesheet" href="css/style.css">
    <script src='js/adaption.js'></script>

</head>
<body>
<header class="m-navbar android-bar">
    <i class="back icon-back"></i>
    <div class="navbar-center">
        <span class="navbar-title">个人设置</span>
    </div>
</header>

<div class="setting-content">
    <form class="setting-form" action="">
        <div class="section">
            <!--昵称-->
            <div class="input-group">
                <label>昵称</label>
                <input type="text" value="用户昵称" disabled="disabled" name="nickname">
            </div>
            <!--真实姓名-->
            <div class="input-group" data-disable="false">
                <label>真实姓名</label>
                <input type="text" placeholder="请填写真实姓名" id="username" name="username">
            </div>
            <!--性别-->
            <div class="input-group" data-disable="false">
                <label>性别</label>
                <input type="text" placeholder="请选择性别" readonly="readonly" id="sex-select" name="sex">
            </div>
            <ul class="m-actionsheet myoption" id="sex-option">
                <li>男</li>
                <li>女</li>
                <a href="javascript:void(0);" class="actionsheet-action" id="J_Cancel">取消</a>
            </ul>


            <!--出生年月-->
            <div class="input-group" data-disable="false">
                <label>出生生日</label>
                <input type="text" placeholder="请选择日期" readonly="readonly" id="birthday-select" name="birthday">
                <div id="targetContainer"></div>
            </div>

            <!--居住地址-->
            <div class="input-group" data-disable="false">
                <label>居住地址</label>
                <input type="text" placeholder="请选择地址" readonly="readonly" id="address-select" name="addrselect">
                <div id="address-option"></div>
            </div>

            <!--详细地址-->
            <div class="input-group" data-disable="true">
                <label>详细地址</label>
                <input type="text" placeholder="请填写详细地址" id="addr-detail" name="addrDetail">
            </div>
        </div>

        <div class="section">
            <!--联系方式-->
            <div class="input-group" data-disable="false">
                <label>联系方式</label>
                <input type="text" placeholder="请填写手机号码" id="userphone" name="userphone">
            </div>

            <!--学历-->
            <div class="input-group more" data-disable="false">
                <label>学历</label>
                <input type="text" placeholder="请选择学历" readonly id="useredu" name="useredu">
            </div>
            <ul class="m-actionsheet myoption" id="useredu-option">
                <li>本科以上</li>
                <li>本科</li>
                <li>专科</li>
                <li>高中</li>
                <li>初中</li>
                <a href="javascript:void(0);" class="actionsheet-action" id="Edu_Cancel">取消</a>
            </ul>

            <!--工作状态-->
            <div class="input-group more" data-disable="false">
                <label>工作状态</label>
                <input type="text" placeholder="请选择工作状态" id="workstatus" readonly name="workstatus">
            </div>
            <ul class="m-actionsheet myoption" id="workstatus-option">
                <li>在职</li>
                <li>离职</li>
                <li>学生</li>
                <a href="javascript:void(0);" class="actionsheet-action" id="Work_Cancel">取消</a>
            </ul>
        </div>

        <!--保存-->
        <button type="button" id="submit-btn">保存</button>

    </form>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/ydui.js"></script>
<script src="plugins/DateSelector/DateSelector.js"></script>
<script src="plugins/MultiPicker/MultiPicker.js"></script>
<script src="plugins/MultiPicker/city.js"></script>
<script src="js/main.js"></script>
<script>
    $(function () {
        var dialog = YDUI.dialog;
        (function(){
            $(".input-group").each(function(){
                var self=$(this);
                console.log(self.data('disable'));
                if(self.data('disable')){
                    self.find('input').attr('disabled',true);
                }
            })

        })();

        (function () {

            /*****性别actionsheet***/
            var $as = $('#sex-option'),
                $sexSelect=$("#sex-select");

            $sexSelect.on('click', function () {
                $as.actionSheet('open');
            });

            $('#J_Cancel').on('click', function () {
                $as.actionSheet('close');
            });
            $('#sex-option li').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                $sexSelect.val($(this).text());
                $as.actionSheet('close');
            });

            /*******出生年月选择****/
            var $DateSelect=$("#birthday-select"),
                dateDisable=$DateSelect.attr('disabled');
            if(!dateDisable){
                new DateSelector({
                    input:'birthday-select',
                    container:'targetContainer',
                    type:0,
                    param:[1,1,1,0,0],
                    beginTime:[],
                    endTime:[],
                    recentTime:[],
                    success:function (arr1,arr2) {
                        console.log(arr1,arr2);
                        $DateSelect.val(arr2[0]+'-'+arr2[1]+'-'+arr2[2])
                    }
                });
            }

            /*******居住地址选择****/
            var $AddrSelect=$("#address-select"),
                addrDisable=$AddrSelect.attr('disabled');;
            if(!addrDisable){
                new MultiPicker({
                    input:'address-select',
                    container:'address-option',
                    jsonData:$city,
                    success:function (arr) {
                        var str='';
                        for(var i=0,length=arr.length;i<length;i++){
                            if(arr[i].value=='请选择'){
                                dialog.toast('请选择地区', 'none', 1000);
                                return false;
                            }else{
                                str+=arr[i].value;
                            }

                        }
                        console.log(arr,str);
                        $AddrSelect.val(str);
                    }
                });
            }

            /*****学历actionsheet***/
            var $eduoption = $('#useredu-option'),
                $EduSelect=$("#useredu");

            $EduSelect.on('click', function () {
                $eduoption.actionSheet('open');
            });

            $('#Edu_Cancel').on('click', function () {
                $eduoption.actionSheet('close');
            });
            $('#useredu-option li').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                $EduSelect.val($(this).text());
                $eduoption.actionSheet('close');
            });

            /*****工作状态actionsheet***/
            var $workoption = $('#workstatus-option'),
                $workSelect=$("#workstatus");

            $workSelect.on('click', function () {
                $workoption.actionSheet('open');
            });

            $('#Work_Cancel').on('click', function () {
                $workoption.actionSheet('close');
            });
            $('#workstatus-option li').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
                $workSelect.val($(this).text());
                $workoption.actionSheet('close');
            });

            //提交
            var $submit=$("#submit-btn");
            $submit.on('click',function () {
                var data=$(".setting-form").serialize();
                var $phone=$("#userphone"),
                    phone=$phone.val().trim();
                if(phone){
                    if(!(bingUtil.required($phone, '手机号', /^1[356789]\d{9}$/))){
                        return false;
                    };
                }
                console.log(data);
                $.ajax({
                    url:'',
                    type:'post',
                    data:data,
                    success:function (res) {

                    },
                    error:function () {
                        dialog.toast('保存失败，请检查网络连接后重试');
                    }
                })
            })

        })()

    });

</script>
</body>
</html>
